<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cards {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            flex-direction: row;
            justify-content: space-between;
            align-content: space-between;
            width: 98%;
            /* height: 100%; */
            position: fixed;
            padding: 1rem;
        }
        .cards .card{
            width: 24%;
            color: #fff;
            cursor: pointer;
            height: 200px;
            position: relative;
            margin-bottom: 20px;
        }
        .cards .card .card-subtitle{
            margin-top: 1.375rem;
        }
        .cards .card .total{
            font-size: 1.25rem;
            margin-left: 20%;
        }
        .cards .card .text-muted{
            color: #ffffff !important;
        }

        .cards .card p.card-text {
            position: absolute;
            bottom: 0px;
        }
        .cards .card:hover{
            -webkit-box-shadow: 3px 5px 15px rgb(40 40 40 / 36%);
            box-shadow: 3px 5px 15px rgb(40 40 40 / 36%);
            -webkit-transform: scale(1.03);
            transform: scale(1.03);
            -webkit-transition: all .1s ease-out;
            transition: all .1s ease-out;
        }

        .cards .card:nth-child(1){
            background: -webkit-gradient(linear, left top, right top, from(#5171fd), to(#c97afd));
            background: linear-gradient(90deg, #5171fd, #c97afd);
            -webkit-box-shadow: 0 5px 10px #c97afd;
            box-shadow: 0 5px 10px #c97afd;
        }

        .cards .card:nth-child(2){
            background: -webkit-gradient(linear, left top, right top, from(#3dadf6), to(#737bfc));
            background: linear-gradient(90deg, #3dadf6, #737bfc);
            -webkit-box-shadow: 0 5px 10px #737bfc;
            box-shadow: 0 5px 10px #737bfc;
        }
        .cards .card:nth-child(3){
            background: -webkit-gradient(linear, left top, right top, from(#ea677c), to(#ef9b5f));
            background: linear-gradient(90deg, #ea677c, #ef9b5f);
            -webkit-box-shadow: 0 5px 10px #ef9b5f;
            box-shadow: 0 5px 10px #ef9b5f;
        }

        .cards .card:nth-child(4){
            background: -webkit-gradient(linear, left top, right top, from(#42d79b), to(#a6e25f));
            background: linear-gradient(90deg, #42d79b, #a6e25f);
            -webkit-box-shadow: 0 5px 10px #a6e25f;
            box-shadow: 0 5px 10px #a6e25f;
        }

        .cards .card:nth-child(5){
            background: -webkit-gradient(linear, left top, right top, from(#f11db5), to(#ea9fd5));
            background: linear-gradient(90deg, #f11db5, #ea9fd5);
            -webkit-box-shadow: 0 5px 10px #ea9fd5;
            box-shadow: 0 5px 10px #ea9fd5;
        }
    </style>
    <script type="text/javascript">
        $(".cards").on("click",".card",function (){
           var url = $(this).find(".card-link").attr("href");
           if(url){
               $('#navbar').bootstrapNavbar("load",url);
           }
        });
    </script>
</head>
<body>
<div class="cards">
    <div class="card" >
        <div class="card-body">
            <h5 class="card-title">MappedStatement</h5>
            <h6 class="card-subtitle mb-2 text-muted">总数量 <span class="total">1234</span></h6>
            <p class="card-text">提供动态SQL管理功能，在 MyBatis、Mybatis-plus 的基础上只做增强不做改变，为简化开发、提高效率而生</p>
            <a href="/pages/dms/sqlStatementList.html" class="card-link d-none">Card link</a>
        </div>
    </div>

    <div class="card" >
        <div class="card-body">
            <h5 class="card-title">Web API</h5>
            <h6 class="card-subtitle mb-2 text-muted">总数量 <span class="total">1234</span></h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="/pages/dms/sqlStatementList.html" class="card-link d-none">Card link</a>
        </div>
    </div>


    <div class="card" >
        <div class="card-body">
            <h5 class="card-title">使用手册</h5>
            <h6 class="card-subtitle mb-2 text-muted">总数量 <span class="total">1234</span></h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link d-none">Card link</a>
            <a href="#" class="card-link d-none">Another link</a>
        </div>
    </div>

    <div class="card" >
        <div class="card-body">
            <h5 class="card-title">Mybatis Generator</h5>
            <h6 class="card-subtitle mb-2 text-muted">总数量 <span class="total">1234</span></h6>
            <p class="card-text">基于mybatis-plus 3.5.3版本实现,<a target="_blank" href="https://www.baomidou.com/">官网</a></p>
            <a href="#" class="card-link d-none">Card link</a>
            <a href="#" class="card-link d-none">Another link</a>
        </div>
    </div>

    <div class="card" >
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <h6 class="card-subtitle mb-2 text-muted">总数量 <span class="total">1234</span></h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link d-none">Card link</a>
            <a href="#" class="card-link d-none">Another link</a>
        </div>
    </div>

</div>

</body>
</html>